import { Component, ComponentInterface, Element, Host, Prop, State, h } from '@stencil/core';

/**
 * 可收缩面板
 *
 * @export
 * @class IBzPane
 */
@Component({
    tag: 'ibz-pane',
    styleUrl: 'ibz-pane.scss',
})
export class IBzPane implements ComponentInterface {
    /**
     * 组件DOM实例
     *
     * @type {HTMLIbzPaneElement}
     * @memberof IBzPane
     */
    @Element()
    el: HTMLIbzPaneElement;

    /**
     * 标题
     *
     * @type {string}
     * @memberof IBzPane
     */
    @Prop()
    headerTitle?: string;

    /**
     * 是否打开
     *
     * @memberof IBzPane
     */
    @State()
    expand = true;

    /**
     * 改变显示状态
     *
     * @memberof IBzPane
     */
    changeExpand(): void {
        if (this.expand) {
            this.hiddenPanel();
        } else {
            this.openPanel();
        }
    }

    /**
     * 显示
     *
     * @memberof IBzPane
     */
    openPanel(): void {
        this.expand = true;
        if (this.parentIsSplitView()) {
            const el: HTMLIbzSplitViewPanelElement = this.el.parentElement as any;
            el.unlockHeight();
        }
    }

    /**
     * 隐藏
     *
     * @memberof IBzPane
     */
    hiddenPanel(): void {
        this.expand = false;
        if (this.parentIsSplitView()) {
            const el: HTMLIbzSplitViewPanelElement = this.el.parentElement as any;
            el.lockHeight(22);
        }
    }

    /**
     * 父节点是否为分割面板
     *
     * @return {*}  {boolean}
     * @memberof IBzPane
     */
    parentIsSplitView(): boolean {
        if (this.el.parentElement?.tagName === 'IBZ-SPLIT-VIEW-PANEL') {
            return true;
        }
        return false;
    }

    /**
     * 绘制箭头图标
     *
     * @return {*}  {*}
     * @memberof IBzPane
     */
    renderArrow(): any {
        return (
            <svg
                class='icon'
                viewBox='0 0 1024 1024'
                version='1.1'
                xmlns='http://www.w3.org/2000/svg'
                width='12'
                height='12'
            >
                <path d='M472.064 751.552 72.832 352.32c-22.08-22.08-22.08-57.792 0-79.872 22.016-22.016 57.792-22.08 79.872 0L512 631.744l359.296-359.296c22.016-22.016 57.792-22.08 79.872 0 22.08 22.08 22.016 57.792 0 79.872l-399.232 399.232C529.856 773.568 494.144 773.568 472.064 751.552z'></path>
            </svg>
        );
    }

    render() {
        return (
            <Host class={{ 'ibz-pane': true, expanded: this.expand }}>
                <div class='ibz-pane-header' onClick={() => this.changeExpand()}>
                    <div class='icon-arrow'>{this.renderArrow()}</div>
                    <h3 class='ibz-pane-title' title={this.headerTitle}>
                        {this.headerTitle}
                    </h3>
                    <div class='ibz-pane-content'>
                        <slot name='content' />
                    </div>
                    <div class='ibz-pane-actions'>
                        <slot name='actions' />
                    </div>
                </div>
                <div class={{ 'ibz-pane-body': true, hidden: !this.expand }}>
                    <slot />
                </div>
            </Host>
        );
    }
}
